<template>
	<view class="zm-banner-swiper-wrap" id="zm-banner-swiper-wrap">
		<view v-for="(item,index) in render"  id="zm-banner-swiper-text-first" class="zm-banner-swiper-text">
			{{item.text}}
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
					
				source:[
					{
						animationData: {},
						animation: null,
						width:0,
						text:"111这是一条广播这是一条广播这是一条广播这是一条广播这是一条广播这是一条广播"
					},
					{
						animationData: {},
						animation: null,
						width:0,
						text:"222这是一条广播这是一条广播这是一条广播这是一条广播这是一条广播这是一条广播"
					},
					{
						animationData: {},
						animation: null,
						width:0,
						text:"333这是一条广播这是一条广播这是一条广播这是一条广播这是一条广播这是一条广播"
					},
					{
						animationData: {},
						animation: null,
						width:0,
						text:"444这是一条广播这是一条广播这是一条广播这是一条广播这是一条广播这是一条广播"
					},
					{
						animationData: {},
						animation: null,
						width:0,
						text:"555这是一条广播这是一条广播这是一条广播这是一条广播这是一条广播这是一条广播"
					}
				],
				render:[
					
				]
				
			}
		},
		mounted() {
			this.render[0] = this.source[0];
			this.render[1] = this.source[1];
			this.render[2] = this.source[2];
			const query = uni.createSelectorQuery().in(this);
			const node = query.selectAll('.zm-banner-swiper-text')
			
			node.boundingClientRect(data => {
				console.log('d',data)
				let width = data.width;
				// console.log('width', width)
				// const animation = uni.createAnimation({
				// 	duration: 3000,
				// 	timingFunction: 'linear'
				// });
				// this.animation = animation;
				// animation.translateX(-width).step()

				// this.animationData = animation.export();
			}).exec()

			
		},

	}
</script>
<style>
	.zm-banner-swiper-wrap {
		display: flex;
		background-color: aqua;
		width: 80%;
		margin: 20px auto;
		align-items: center;
		height: 30px;
		overflow-x: hidden;
	}

	.zm-banner-swiper-text {

		white-space: nowrap;
		transform: translateX(0);
	}
</style>